import React, { Component } from 'react';
import { Modal, Button, Form, Input } from 'antd';
class jcymtc extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      visible: true,
      param: {}
    }
    this.formRef = React.createRef()
    this.formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
    };
  }

  //组件挂载完毕 --用于数据请求
  componentDidMount() {

    //编辑时的初始化
    if (this.props.editStatus) {
      this.setState({
        param: this.props.childrenParam[0]
      })
      this.formRef.current.setFieldsValue({
        title: this.props.childrenParam[0].title,
        author: this.props.childrenParam[0].author,
        amount: this.props.childrenParam[0].amount,
        age: this.props.childrenParam[0].age,
      })
    }
  }

  //组件将要卸载
  componentWillUnmount() { }

  render() {
    return (
      <div>
        <Modal
          visible={this.state.visible} title={this.props.editStatus ? '编辑' : '新增'} onOk={this.handleOk} onCancel={this.handleCancel} afterClose={this.afterClose} width="600px"
          footer={[
            <Button key="back" onClick={this.handleCancel}>
              关闭
            </Button>,
            <Button key="submit" type="primary" loading={this.state.loading} onClick={this.handleOk}>
              确认
            </Button>,
          ]}
        >
          <Form {...this.formItemLayout} ref={this.formRef} onFieldsChange={this.onFieldsChange} onFinish={this.onFinish}>
            <Form.Item label="文章标题" name="title" rules={[{ required: true, message: '请输入名称' }]}>
              <Input />
            </Form.Item>
            <Form.Item label="姓名" name="author" rules={[{ required: true, message: '请输入名称' }]}>
              <Input />
            </Form.Item>
            <Form.Item label="点击次数" name="amount" rules={[{ required: true, message: '请输入名称' }]}>
              <Input />
            </Form.Item>
            <Form.Item label="年龄" name="age" rules={[{ required: true, message: '请输入名称' }]}>
              <Input />
            </Form.Item>
          </Form>
        </Modal>
      </div>
    );
  }

  handleOk = () => {
    this.formRef.current.validateFields().then(values => {
      this.setState({ loading: true });
      setTimeout(() => {
        this.setState({ loading: false, visible: false });
      }, 2000);
    })
  };

  handleCancel = () => {
    this.setState({
      visible: false
    })
  };
  afterClose = (params) => {
    this.props.layerCallback(false)
  }
}

export default jcymtc;